<template>
	<view class="tabbar-custom" :style="useTheme.theme">
		<view class="tabbar-list">
			<view class="tabbar-item" :style="useTheme.theme" v-for="(item, index) in tabbarList" :key="index" @click="handleTabClick(item, index)">
				<view :class="['iconfont', item.iconPath, 'tabbar-item-icon', currentActive == index ? 'active' : '']"></view>
				<view :class="['tabbar-item-text', currentActive == index ? 'active' : '']">{{item.text}}</view>
			</view>
		</view>
		<!-- 底部安全区域 -->
		<view :style="{height: bottomHeight}"></view>
	</view>
</template>
<script setup lang="ts">
	import { reactive, ref, computed, watch, withDefaults } from 'vue';
	import useThemeStore from '@/store/theme';
	import { useNavbar } from "@/utils/hooks.js";
	const { bottomHeight } = useNavbar();
	const useTheme = useThemeStore();
	const props = withDefaults(defineProps<{
		tabbarActive : number //选中索引
	}>(), {
		tabbarActive: 0,
	});
	const tabbarList = ref([
		{
			pagePath: "/pages/home/index",
			iconPath: "icon-jiankong",
			text: "监控",
		}, {
			pagePath: "/pages/energy/index",
			iconPath: "icon-nenghao",
			text: "能耗",
		}
		// , {
		// 	pagePath: "/pages/maintain/index",
		// 	iconPath: "icon-weibao",
		// 	text: "维保",
		// }
		, {
			pagePath: "/pages/warn/index",
			iconPath: "icon-gaojing",
			text: "告警",
		}, {
			pagePath: "/pages/mine/index",
			iconPath: "icon-wode",
			text: "我的",
		}
	])
	// 修改tabbarActive的值
	const currentActive = ref(props.tabbarActive);

	// 下拉选择-同步更新，返回按钮事件
	const emit = defineEmits(["tabIndexChange", "tabTextChange"]);

	// 监听tabbarActive值的变化
	watch(() => props.tabbarActive, (val) => {
		currentActive.value = val;
	});

	// tab点击切换
	function handleTabClick(item : Object, index : number) {
		currentActive.value = index;
		emit("tabIndexChange", index);
		emit("tabTextChange", item["text"]);
	}
</script>
<style lang="scss" scoped>
	.tabbar-custom {
		padding-top: 10px;
		background-color: #fff;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);

		.tabbar-list {
			display: flex;
		}

		.tabbar-item {
			height: 60px;
			flex: 1;
			text-align: center;
		}

		.tabbar-item-icon {
			color: #9CA4B8;
			font-size: 25px;
			text-align: center;

			&.active {
				color: $theme-color;
			}
		}

		.tabbar-item-text {
			padding-top: 2px;
			color: #9CA4B8;
			font-size: 11px;

			&.active {
				color: $theme-color;
				font-weight: 600;
			}
		}
	}
</style>